<!--
 * @Author: hu_binbin
 * @Date: 2021-08-23 10:16:50
 * @LastEditTime: 2021-08-23 20:39:53
 * @Description: 调度令列表页面
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
        </Theader>
        <!-- 搜索区域 -->
		<div class="search_header center_center">
			<van-search v-model.trim="taskName" clearable @input="focus" background="#F5F6FA" placeholder="输入操作票">
			</van-search> 
			<van-image class="imgSize" width="23" height="23" @click="showScreen=true" :src="icon.screen" />
		</div>
        <div style="overflow-y: auto;height: 100%;padding-bottom: 3rem;">
            <div class="tab-con">
                <div class="tab-item" @click="topageDetail" v-for="(item,index) in showTaskList" :key="index">
                    <div class="tab-title">
                        <span>黎里变:</span>
                        <label>110kv正母线、19H4坝黎线开关设断绝的</label>
                        <div class="tab-check">
                            <van-checkbox 
                            checked-color="#17B39B"
                            v-model="item.checked"></van-checkbox>
                        </div>
                    </div>
                    <div class="tab-sub">
                        <span>操作单位：</span>
                        <label>黎里变</label>
                    </div>
                    <div class="tab-per tab-per-flex">
                        <div class="flex-center">
                            <span>接受人：</span>
                            <label>李四贵</label>
                        </div>
                    </div>
                    <div class="tab-time">
                        <div class="time-t">
                            <span>预定操作时间：</span>
                        </div>
                        <div class="time-cont">2020/06/09 09:21</div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部按钮-->
        <div class="btn">
            <van-button color="#17B49B" @click="submitFile" style="width: 80%;" size="small" type="primary">确认</van-button>
        </div>

        <van-popup
		@close="showScreen=false"
		v-model="showScreen"
		closeable
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<commandScreen></commandScreen>
		</van-popup>
	</article>
</template>
<script>
	import Theader from "../component/header"
    import commandScreen from "../component/commandScreen"
	export default {
		name: "commandList",
		components:{
			Theader,
            commandScreen
		},
		data() {
			return {
                title: "调度令列表",
                showTaskList:[
                    {},{},{},{},{}
                ],
                taskName:"",
                showScreen:false,
                icon: {
					rfid:require('../../../../assets/tour/icon-rfid.png'),
					scan:require('../../../../assets/tour/icon-scan.png'),
					screen:require('../../../../assets/tour/icon-screen.png'),
					add:require('../../../../assets/tour/icon-add.png'),
				},
			}
		},
		computed: {

		},
		methods: {
            back(){
                this.$router.go(-1)
            },
            //rifid 
            rfidBtn() {

            },
            focus() {
                
            },
            //扫描二维码
            scanBtn() {

            },
            submitFile() {
                this.$router.push({
					name: "cycleReduceFileAlert",
				})
			},
			topageDetail() {
				this.$router.push({
					name: "commandDetail",
				})
			}
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
    .center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
	.search_header{
		margin-top: 45px;
		margin-right: 0.7rem;
	}
	.search_header /deep/ .van-search{
		flex:1;
	}
	.search_header /deep/ .van-search__content{
		background: #fff;
		border-radius: 0.7rem;
	}
    .tab-con{
        margin: 0.7rem;
    }
    .tab-con .tab-item{
        padding: 0.5rem 0.7rem;
		background: #fff;
		position: relative;
		overflow: hidden;
        border-radius: 0.5rem;
        margin-bottom: 0.7rem;
	}
    .tab-icon{
		display: flex;
		position: absolute;
		right: -7%;
		top: 9%;
		transform: rotate(45deg);
	}
    .box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: #18B49B;
		color: #fff;
	}
    .tab-title{
		font-size: 15px;
		font-weight: bold;
        display: flex;
        align-items: center;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
        width: 4rem;
		color:#0EB295;
		margin-right: 10px;
	}
    .tab-title label{
        flex:1;
	}
	.tab-sub{
		margin-bottom: 0.7rem;
		color: #666;
		font-size: 13px;
	}
	.tab-per,.tab-time{
        display: flex;
        align-items: center;
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
	}
	.tab-per-flex{
		display: flex;
		justify-content: space-between;
	}
    .time-t{
        display: flex;
		justify-content: space-between;
    }
	.time-b{
       width: 5.5rem; 
       font-size: 12px;
    }
	.flex-center{
		display: flex;
		align-items: center;
	}
    .btn{
        width: 100%;
        background: rgb(255, 255, 255);
        padding: 0.5rem 0px;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
    }
	.tab-title label{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		flex:1;
	}
	/deep/ .van-checkbox{
		width: 2rem;
		display: flex;
    	justify-content: center;
	}
    
</style>

